<template>
  <el-row>
    <div style="float: left;font-size: 25px;font-weight: bold">我的预约记录</div>
  </el-row>
  <el-divider border-style="solid" style="margin: 10px 0"/>
  <el-card style="margin: 0 auto;width:1000px">
    <el-row>
      <el-col :span="14"></el-col>
      <el-col :span="6">共<span style="color:orange ">{{total}}</span>条记录</el-col>
      <el-col :span="4"></el-col>
    </el-row>
  </el-card>
  <el-card style="width: 1000px;height: 120px" v-for="i in appointment" :key="i" class="modeCard">
    <el-row>
      <el-col :span="4" class="">
        <span style="color: #bea27a;float: left">预约科室：{{ i.departmentName }}</span><br><br>
        <span style="font-size: 12px;float: left">预约医生：{{ i.doctorName }}</span>
      </el-col>
      <el-col :span="12"></el-col>
      <el-col :span="4">
        <span style="color: #bea27a;float: left">预约时间</span><br><br>
        <span style="font-size: 12px;float: left">{{ i.createDate }}</span><br>
        <span style="font-size: 12px;float: left">病情描述:&nbsp;&nbsp;{{ i.remark }}</span>
      </el-col>
      <el-col :span="4">
        <div style="width:100px;height: 20px;background-color:orange;margin-top: 30px">
          <span style="line-height: 20px;color: white">预约成功</span>
        </div>
      </el-col>
    </el-row>
  </el-card>
  <div class="divPagination">
    <el-pagination
        v-model:current-page="currentPage"
        layout="prev, pager, next, jumper"
        :total="maxPage*10"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";

const userToken = localStorage.getItem("user-token") ? JSON.parse(localStorage.getItem("user-token")) : null;
const userId = localStorage.getItem("user-id") ? JSON.parse(localStorage.getItem("user-id")):null;
const appointment = ref({})

const handleCurrentChange = (val) => {
  currentPage.value = val;
  getAppointmentsSelect(currentPage.value);
}
const currentPage = ref(1)
const total = ref()
const maxPage = ref()
const getAppointmentsSelect =(currentPage)=>{
  axios.get(BASE_URL + "/v1/appointments/select/id="+userId+"/pageNum="+currentPage).then((response) => {
    if (response.data.code === 20000) {
      appointment.value = response.data.data.list;
      total.value = response.data.data.total;  // 计算数据总条数
      maxPage.value = response.data.data.maxPage;
    } else ElMessage.error(response.data.message)
  })
}
onMounted(()=>{
  if (userToken == null) {
    ElMessage.error("请先登录!");
    router.push('/patient/login');
    return;
  }
  axios.defaults.headers.common['Authorization'] = userToken;
  if (userId!=null) {
    getAppointmentsSelect(currentPage.value);
  }
})
</script>
<style scoped>
.modeCard {
  margin-top: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.5s;
}

.modeCard:hover {
  transition: 0.5s;
  transform: scale(1.02);
}
.divPagination {
  margin-top: 20px;
  margin-left: 750px;
}
</style>